<template>
  <template v-if="cardTimesPackItem.cardSubType==='201'">
    <div v-for="item in cardTimesPackItem.cardTimesGoodsList" :key="item.id"
         :class="['item',getCardGoodsRemainQty({cardTimesPackItem, cardTimesGoodsItem: item})<1&&'disabled']">
      <TypographyText :ellipsis="{rows:1}" class="title">
        <span v-if="cardTimesPackItem.giftFlag == 1" class="give">赠</span>
        {{ item.goodsName }}
      </TypographyText>
      <div class="label">剩余次数</div>
      <div class="number">{{ getCardGoodsRemainQty({cardTimesPackItem, cardTimesGoodsItem: item}) }}</div>
      <div class="add">
        <img v-if="getCardGoodsRemainQty({cardTimesPackItem, cardTimesGoodsItem: item})>0"
             src="./img/add-1.png" class="use icon"
             @click="addCardGoods2Cart({cardTimesPackItem,cardTimesGoodsItem:item})" alt=""/>
        <img v-else src="./img/add-2.png" class="icon" alt="">

      </div>
    </div>
  </template>
  <template v-else>
    <div v-for="item in cardTimesPackItem.cardTimesGoodsList" :key="item.id"
         :class="['item',getCardGoodsRemainQty({cardTimesPackItem, cardTimesGoodsItem: item})<1&&'disabled']">
      <TypographyText :ellipsis="{rows:1}" class="title">{{ item.goodsName }}</TypographyText>

      <div class="add2">

        <img v-if="getCardGoodsRemainQty({cardTimesPackItem, cardTimesGoodsItem: item})>0"
             src="./img/add-1.png" class="use icon"
             @click="addCardGoods2Cart({cardTimesPackItem,cardTimesGoodsItem:item})" alt=""/>
        <img v-else src="./img/add-2.png" class="icon" alt="">

      </div>
    </div>
  </template>
</template>

<script setup>
import {addCardGoods2Cart, getCardGoodsRemainQty} from "./cart.js";
import {TypographyText} from "ant-design-vue";

const props = defineProps({
  cardTimesPackItem: {
    type: Object,
  },
});


</script>

<style scoped>
.item {
  background: #FFF;
  font-weight: bold;
  font-size: 14px;
  color: #C95E78;

  width: 31%;
  box-shadow: 0 1px 4px 0 rgba(146, 146, 146, 0.17);
  border-radius: 5px;

  padding: 6px;
  margin: 6px 0;

  .title {
    font-weight: bold;
    font-size: 14px;
    color: #C95E78;
  }

  .label {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
  }

  .number {
    font-weight: 400;
    font-size: 32px;
    color: #999999;
    padding-left: 6px;
  }

  .icon {
    width: 25px;
    object-fit: contain;
  }

  .add {
    margin-top: -12px;
    text-align: right;
  }

  .add2 {
    margin-top: 0;
    text-align: right;
  }
}

.disabled {
  background: #F6F6F6;
}

.give {
  background: linear-gradient(143deg, #FFB0D5 0%, #FF819F 100%);
  box-shadow: 0 1px 2px 0 rgba(199, 199, 199, 0.4);
  color: #fff;

  padding: 4px 4px;
  font-size: 10px;
  border-radius: 6px;
}

</style>
